<template>
	<up-navbar leftIcon="" @rightClick="rightClick" :bgColor="bgColor" v-bind="$attrs">
		<template #center>
			<view class="title" :style="{color}" v-if="!centerslot">{{title}}</view>
			<slot name="center"></slot>
		</template>
		<template #right>
			<image class="iconclose" src="/static/img/home/close.png" v-if="rightShow"></image>
		</template>

	</up-navbar>
</template>

<script setup>
	import {
		useAttrs
	} from 'vue';
	const attr = useAttrs()
	const props = defineProps({
		placeholder: {
			type: Boolean,
			default: true
		},
		centerslot: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: '#646464'
		},
		title: {
			type: String,
			default: ''
		},
		rightShow: {
			type: Boolean,
			default: true
		},
		custom: {
			type: Boolean,
			default: false
		},
		bgColor: {
			type: String,
			default: '#0d063e'
		}
	})

	const emits = defineEmits(['back'])

	// 自定义返回逻辑函数
	function customNavigateBack(delta = 1) {
		// 获取当前页面栈
		const pages = getCurrentPages();

		// 如果页面栈长度大于1，表示可以回退
		if (pages.length > 1) {
			// 获取当前页面和回退目标页面的路径
			const currentPage = pages[pages.length - 1].route; // 当前页面
			const previousPage = pages[pages.length - (delta + 1)].route; // 回退目标页面

			// 判断回退目标页面和当前页面是否相同
			if (currentPage === previousPage) {
				// 如果相同，跳转到首页
				uni.switchTab({
					url: '/pages/index/home'
				})
			} else {
				// 如果不同，正常回退
				uni.navigateBack({
					delta: delta
				});
			}
		} else {
			// 如果页面栈少于等于1，直接跳转到首页
			uni.switchTab({
				url: '/pages/index/home'
			})
		}
	}


	const rightClick = () => {
		if (props.custom) {
			emits('back');
			return
		}
		customNavigateBack()
	}
</script>

<style lang="scss" scoped>
	.title {
		color: $base-color;
	}

	.iconclose {
		position: absolute;
		width: 52rpx;
		height: 52rpx;
		right: 40rpx;

		&::after {
			content: "";
			position: absolute;
			left: -20rpx;
			top: -20rpx;
			bottom: -20rpx;
			right: -20rpx;

		}
	}
</style>